import React, { memo, useState, useEffect } from "react";
import css from './css.module.scss'
import RechTitle from '../../components/RechTitle'
import DownloadList from '../../components/DownloadList'
import { selectAward, selectOneAward } from '../../services/home'
import { Tabs } from 'antd';
import Newkejichuangxinchengguo from './components/Newkejichuangxinchengguo'
import Newkejichuangxingongcheng from './components/Newkejichuangxingongcheng'
import Newkejirencai from './components/Newkejirencai'
import Newshejichuangxin from './components/Newshejichuangxin'
import Upload from '../../components/Upload'
export default memo(function ExplainForm(props) {
    const { search } = props.location
    const searchData = search.split('?')[1]
    const { TabPane } = Tabs;
    const [awardList, setAwardList] = useState([])
    const [awardId, setAwardId] = useState('')
    const [details, setDetails] = useState('')

    useEffect(() => {
        selectAward({
            pageSize: 1000,
            page: 1,
            awardType: 2
        }).then(res => {
            if (res.data.list !== 0) {
                setAwardList(res.data.list)
            }
        })
    }, [])
    useEffect(() => {
        if (searchData) {
            setAwardId(searchData)
            callback(searchData)
        } else {
            if (awardList.length !== 0) {
                callback(awardList[0].awardId)
            }
        }
    }, [awardList, searchData])
    const callback = (key) => {
        setAwardId(key)
        selectOneAward({ awardId: key }).then(res => {
            console.log(res.data)
            if (res.data.length !== 0) {
                if (res.data[0].awardAccessory) {
                    res.data[0].awardAccessory = JSON.parse(res.data[0].awardAccessory)
                }
                setDetails(res.data[0])
            }
        })
    }
    return (
        <div className='w ptb60'>
            <RechTitle title='奖项说明'></RechTitle>
            <div className={css.friend_box}>
                <div style={{ marginBottom: "60px" }}>
                    <Tabs centered={true} activeKey={awardId + ''} defaultActiveKey={awardId + ''} onChange={callback}>
                        {awardList.map((item) => {
                            return (
                                <TabPane tab={item.title} key={item.awardId}>
                                    <div className='rech_text' dangerouslySetInnerHTML={{ __html: details.awardContent }}>
                                    </div>
                                    { details.pageUrl === 'newkejichuangxinchengguo' && <Newkejichuangxinchengguo awardId={item.awardId} />}
                                    { details.pageUrl === 'newkejichuangxingongcheng' && <Newkejichuangxingongcheng awardId={item.awardId} />}
                                    { details.pageUrl === 'newkejirencai' && <Newkejirencai awardId={item.awardId} />}
                                    { details.pageUrl === 'newshejichuangxin' && <Newshejichuangxin awardId={item.awardId} />}
                                    {/* //附件下载 */}
                                    {details.awardAccessory && details.awardAccessory.length !== 0 && <DownloadList list={details.awardAccessory} />}
                                    { !details.pageUrl && <Upload awardId={item.awardId} />}
                                </TabPane>
                            )
                        })}
                    </Tabs>
                </div>
            </div>
        </div>
    )
})
